<!--
 * @Descripttion: 订单详情
 * @version:
 * @Author: lehaixia
 * @Date: 2022-11-09 09:43:21
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-02-14 16:03:59
-->
<template>
  <div class="content">
    <ComHeader id="oHeader" :arrow="true" :border="barOpacity===1" :title-left="false" :show-statusbar="true" title="订单信息" :bg-color="headerBgColor" @get-height="handleHeadHeight" />
    <div class="detail-con">
      <div class="d-base">
        <div class="d-base-header">
          <div class="d-avatar">
            <ImageVideo lazy-load fit="cover" :src="detailData.avatar" />
          </div>
          <div class="d-base-name">{{ detailData.name }}
            <template>
              <img v-if="detailData.gender===1" class="icon-sex" src="@/assets/img/sex-man.png">
              <img v-else class="icon-sex" src="@/assets/img/sex-man.png">
            </template>
          </div>
          <div v-if="detailData.clueCustomerType" class="d-base-type">{{ getDictName('CRM_CUSTOMER_TYPE',detailData.clueCustomerType) }}</div>
        </div>
        <div class="d-base-code"><span>订单编码:</span><span class="d-base-value">{{ detailInfo.retailOrderCode }}</span></div>
        <div class="d-base-title"><span>电话:</span> <span class="d-base-value">{{ detailData.phone }}</span></div>
        <div class="d-base-title"><span>地址:</span><span class="d-base-value">{{ detailData.provinceName }}{{ detailData.cityName }}{{ detailData.districtsName }}{{ detailData.streetName }}{{ detailData.detailedAddress }}</span></div>
      </div>
      <div class="d-list">
        <div class="d-list-title">订单信息</div>
        <div class="d-list-desc">
          <div class="d-row"><div class="d-col-title">订单进度</div><div class="d-col-desc">{{ detailInfo.state }}</div></div>
          <div class="d-row"><div class="d-col-title">制单时间</div><div class="d-col-desc">{{ detailInfo.createTime }}</div></div>
          <div class="d-row"><div class="d-col-title">订单来源</div><div class="d-col-desc">{{ getDictName('ORDER_SOURCE',detailInfo.orderSource) }}</div></div>
          <div class="d-row"><div class="d-col-title">销售门店</div><div class="d-col-desc">{{ detailInfo.mdmOrgName }}</div></div>
          <div class="d-row"><div class="d-col-title">家居顾问</div><div class="d-col-desc">{{ detailInfo.homeConsultantName }}</div></div>
          <div class="d-row"><div class="d-col-title">收款状态</div><div class="d-col-desc">{{ getDictName('COLLECTION_STATUS',detailInfo.paymentState) }}</div></div> <!--01：未结清，02：已结清 -->
          <div class="d-row"><div class="d-col-title">制单人</div><div class="d-col-desc">{{ detailInfo.createBy }}</div></div>
          <div class="d-row"><div class="d-col-title">备用电话</div><div class="d-col-desc">{{ detailInfo.consumerPhoneBak }}</div></div>
          <div class="d-row"><div class="d-col-title">销售日期</div><div class="d-col-desc">{{ detailInfo.saleDate }}</div></div>
          <div class="d-row"><div class="d-col-title">关联商机</div><div class="d-col-desc">{{ detailInfo.businessOpportunity }}</div></div>
          <div class="d-row"><div class="d-col-title">订单备注</div><div class="d-col-desc">{{ detailInfo.remark }}</div></div>
        </div>
      </div>

      <div class="d-list">
        <div class="d-list-title">配送信息</div>
        <div class="d-list-desc">
          <div class="d-row"><div class="d-col-title">收货人姓名</div><div class="d-col-desc">{{ retailReceiverData.consigneeName }}</div></div>
          <div class="d-row"><div class="d-col-title">收货人电话</div><div class="d-col-desc">{{ retailReceiverData.consigneePhone }}</div></div>
          <div class="d-row"><div class="d-col-title">备用电话</div><div class="d-col-desc">{{ retailReceiverData.consigneePhoneBak }}</div></div>
          <div class="d-row"><div class="d-col-title">预约送货日期</div><div class="d-col-desc">{{ retailReceiverData.deliveryTime }}</div></div>
          <div class="d-row"><div class="d-col-title">送货方式</div><div class="d-col-desc">{{ getDeliveryModeName(retailReceiverData.deliveryMode) }}</div></div>
          <div class="d-row"><div class="d-col-title">送装费用</div><div class="d-col-desc">{{ retailReceiverData.deliveryFee }}</div></div>
          <div class="d-row"><div class="d-col-title">送货地址</div><div class="d-col-desc"> {{ receiverAddress }}</div></div>
        </div>
      </div>

      <div class="d-list">
        <div class="d-list-title">收款信息</div>
        <div class="d-list-desc">
          <div class="d-row"><div class="d-col-title">订单总金额</div><div class="d-col-desc">{{ detailInfo.totalFee }}</div></div>
          <div class="d-row"><div class="d-col-title">订单已收金额</div><div class="d-col-desc">{{ detailInfo.paymentFee }}</div></div>
          <div class="d-row"><div class="d-col-title">订单优惠金额</div><div class="d-col-desc">{{ detailInfo.discountFee }}</div></div>
          <div class="d-row"><div class="d-col-title">订单抹零金额</div><div class="d-col-desc">{{ detailInfo.ignoreFee }}</div></div>
          <div class="d-row"><div class="d-col-title">订单损失金额</div><div class="d-col-desc">{{ detailInfo.lossFee }}</div></div>
          <div class="d-row"><div class="d-col-title">订单已退金额</div><div class="d-col-desc">{{ detailInfo.returnFee }}</div></div>
          <div class="d-row"><div class="d-col-title">合计应收金额</div><div class="d-col-desc">{{ detailInfo.shouldPaymentFee }}</div></div>
        </div>
      </div>
      <!-- <div class="d-list">
        <div class="d-list-title">合同快照</div>
        <div class="d-list-desc">
          TODO-接口待开发中
        </div>
        <div class="d-list-desc" @click="clickPreviewHandle">
          <van-image :src="coverPic | filterURL" width="127px" height="82px" fit="cover" :radius="8">
            <error-pic slot="error" />
          </van-image>
        </div>
      </div>
      <div class="d-list">
        <div class="d-list-title">合同附件</div>
        <div class="d-list-desc">
          TODO-接口待开发中
          图片展示及上传
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { getDictByPatchType } from '@/apis/dataDict'
import errorAvatarIcon from '@/assets/defaultAvatar.png'
import ErrorPic from '@/components/ErrorPic'
import { ImagePreview } from 'vant'
import { getOrderDetail, getDisDetail } from '@/apis/customer'
import ImageVideo from '@/components/ImageVideo'

export default {
  name: 'OrderDetail',
  components: { ImageVideo, ErrorPic },
  data() {
    return {
      errorAvatarIcon,
      detailInfo: '',
      detailData: '', // 客户信息
      coverPic: '',
      dictData: '',
      headHeight: 50,
      statusBarHeight: 0,
      barOpacity: 0 // 导航栏透明度
    }
  },
  computed: {
    headerBgColor() {
      return `rgba(250, 251, 254, ${this.barOpacity > 1 ? 1 : this.barOpacity})`
    },
    // 配送信息
    retailReceiverData() {
      const { retailReceiverDTO = '' } = this.detailInfo
      return retailReceiverDTO
    },
    // 送货地址
    receiverAddress() {
      const { retailReceiverDTO = '' } = this.detailInfo
      const { receiverProvince, receiverCity, receiverDistrict, receiverTown, receiverAddress } = retailReceiverDTO && retailReceiverDTO
      return receiverProvince + receiverCity + receiverDistrict + receiverTown + receiverAddress
    }
  },
  async created() {
    const { disCode, retailOrderCode, clueCustomerId } = this.$route.query
    this.getDetail(clueCustomerId)
    this.initData(disCode, retailOrderCode)
    const dictTypeCodes = ['CRM_CUSTOMER_TYPE']

    const dictData = await getDictByPatchType({ dictTypeCodes })
    const dictDataRetail = await getDictByPatchType({ dictTypeCodes: ['ORDER_SOURCE', 'COLLECTION_STATUS'], appCode: 'retail' })

    // 零售数据字典
    this.dictData = Object.assign({}, dictData, dictDataRetail)
    const { statusBarHeight } = this.$store.getters
    this.statusBarHeight = statusBarHeight
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, { passive: true })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, { passive: true })
  },
  methods: {
    // 客户相关信息
    getDetail(Id) {
      getDisDetail(Id).then(res => {
        this.detailData = res.data
      })
    },
    // 订单相关信息
    initData(disCode, retailOrderCode) {
      getOrderDetail(disCode, retailOrderCode).then(res => {
        if (res.success === 1 && res.data) {
          this.detailInfo = res.data
        }
      })
    },
    handleHeadHeight(h) {
      // console.log('当前head高度为', h)
      this.headHeight = h
    },
    // 获取数据字典值对应的名称
    getDictName(dictType, dictCode) {
      let name = ''
      if (this.dictData && this.dictData[dictType]) {
        const index = this.dictData[dictType].findIndex(v => v.dictCode === dictCode)
        if (index > -1) {
          name = this.dictData[dictType][index].dictName
        }
      }
      return name
    },
    getDeliveryModeName(code) {
      const map = {
        '01': '自提',
        '02': '商家配送'
      }
      return map[code] || ''
    },
    // 方案查看图片
    clickPreviewHandle() {
      ImagePreview({
        images: [this.coverPic],
        startPosition: 0
      })
    },
    // 滑动时改变颜色透明度
    handleScroll() {
      const topEl = document.querySelector(`#oHeader`)
      if (topEl) {
        const top = topEl.getBoundingClientRect().top
        if (top >= 0) {
          this.barOpacity = 0
          return
        }
        let barOpacity = 1 - (top + this.statusBarHeight) / this.statusBarHeight
        if (barOpacity > 1) barOpacity = 1
        this.barOpacity = barOpacity
      }
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  background-image: url('~@/assets/category/edit_bg@2x.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  .detail-con {
    padding: 16px 0;

    .d-base {
      background: #FFFFFF;
      box-shadow: 0px 3px 30px 0px rgba(209,211,218,0.56);
      border-radius: 14px;
      margin: 16px 20px;
      padding: 16px;
      .d-base-header {
        position: relative;
        padding-left: 78px;
        padding-bottom: 5px;
        min-height: 30px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .d-avatar {
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 1;
          width: 68px;
          height: 68px;
          box-sizing: border-box;
          background: #FFFFFF;
          box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.06);
          border-radius: 14px;
          border: 2px solid #FFFFFF;
          border-radius: 16px;
          overflow: hidden;
          /deep/.image-video{
            border-radius: 14px;
          }
        }
        .d-base-name {
          line-height: 25px;
          font-size: 18px;
          font-weight: 600;
          color: #343640;
          display: flex;
          align-items: center;
          .icon-sex{
            width: 16px;
            height: 16px;
            margin-left: 6px;
          }
        }
        .d-base-type {
          min-width: 40px;
          height: 20px;
          background-color: rgba(238, 103, 26, 0.1);
          border-radius: 6px;
          font-size: 10px;
          color: #EE671A;
          line-height: 20px;
          padding: 0 10px 0 11px;
          font-weight: bold;
        }
      }

      .d-base-code {
        // padding-top: 16px;
        padding-bottom: 14px;
        span {
          font-size: 14px;
          font-weight: 500;
          color: #3C4458;
          line-height: 20px;
        }
        .d-base-value {
          padding-left: 6px;
        }
      }
      .d-base-title {
        padding: 2px 0;

        span {
          width: 211px;
          font-size: 12px;
          font-weight: 400;
          color: #979AA9;
          line-height: 17px;
          word-break: break-all;
        }
        .d-base-value {
          padding-left: 6px;
        }
      }
    }
    .d-list {
      background: #FFFFFF;
      border-radius: 8px;
      padding: 16px;
      margin: 0 16px 16px;
      .d-list-title {
        position: relative;
        height: 36px;
        font-size: 14px;
        font-weight: 500;
        color: #16BC83;
        line-height: 20px;

        &::after{
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 1px;
          background: #EFF2F7;
        }
      }
      .d-list-desc {
        padding-top: 16px;
        .d-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 12px;
          &:nth-last-of-type(1) {
            margin-bottom: 0;
          }
          .d-col-title {
            min-width: 80px;
            font-size: 12px;
            font-weight: 500;
            color: #111111;
            line-height: 17px;
            padding-right: 10px;
          }
          .d-col-desc {
            min-width: 0px;
            font-size: 12px;
            font-weight: 400;
            color: #7D8091;
            line-height: 17px;
          }
        }
      }
    }
  }
}
</style>
